<template>
	<div class="post" @click="$router.push({path: `/article/${post.id}`})">
		
		<!-- 左右布局，一张图 -->
		<div class="type1" v-if="post.type === 1 && post.cover.length < 3">
			<div class="left">
				<h3 class="title">{{post.title}}</h3>
				<p class="desc">
					<span>{{post.user.nickname}}</span>
					<span>{{post.comment_length}}跟帖</span>
				</p>
			</div>
			<van-image class="right" fit="cover" :src="post.cover[0].url | imgUrl" />
		</div>

		<!-- 上下结构，一个视频 -->
		<div class="type2" v-else-if="post.type === 2">
			<h3 class="title">{{post.title}}</h3>
			<div class="vedio_group">
				<i class="iconfont icon-ziyuan"></i>
				<van-image class="vedio_img" fit="cover" :src="post.cover[0].url | imgUrl" />
			</div>
			<p class="desc">
				<span>{{post.user.nickname}}</span>
				<span>{{post.comment_length}}跟帖</span>
			</p>
		</div>

		<!-- 上下结构，三张图 -->
		<div class="type3" v-else-if="post.type === 1 && post.cover.length > 2">
			<h3 class="title">{{post.title}}</h3>
			<div class="cover_group">
				<van-image class="cover_img" fit="cover" v-for="item in post.cover" :key="item.id" :src="item.url | imgUrl" />
			</div>
			<p class="desc">
				<span>{{post.user.nickname}}</span>
				<span>{{post.comment_length}}跟帖</span>
			</p>
		</div>
	</div>
</template>

<script>
	//import request from '../utils/request.js'
	export default {
		props: {
			post: {
				type: Object,
				required: true
			}
		},
		
		//局部过滤
/* 		filters: {
			imgUrl (val){
				if(val.indexOf('http') === -1){
					return request.defaults.baseURL + val;
				}else{
					return val;
				}
			}
		} */
	}
</script>

<style lang="less" scoped>
	.post {
		border-bottom: 1px solid #c1c1c1;
		//公共部分
		.title {
			font-size: 16px;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			word-break: break-all;
			-webkit-box-orient: vertical;
			overflow: hidden;

		}

		.desc {
			color: #999999;

			span {
				font-size: 14px;
				margin-right: 10px;
			}
		}

		//布局一
		.type1 {
			display: flex;
			padding: 10px;
			background-color: #ffffff;

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 5px;


			}


			.right {
				height: 75px;
				width: 120px;
			}
		}

		//布局二
		.type2 {
			padding: 10px;

			.vedio_group {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon-ziyuan {
					font-size: 50px;
					color: #ffffff;
					border-radius: 50%;
					position: absolute;
					z-index: 1;
				}

				.vedio_img {
					width: 100%;
				}
			}

			.title {
				margin-bottom: 10px;
			}

			.desc {
				margin-top: 10px;
			}
		}

		//布局三
		.type3 {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 10px;

			.cover_group {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.cover_img {
					width: 33%;
					height: 75px;
				}
			}

			.title {
				margin-bottom: 10px;
			}

			.desc {
				margin-top: 10px;
			}
		}

	}
</style>
